<template>
  <div class="app-container">
    <el-form   label-width="20px">
      <el-form-item> 
        <el-button type="primary"  size="mini"   @click="clear"  >清屏</el-button>
 
        <el-button type="primary"  size="mini"   @click="foot"  >滚动至底部</el-button>
      </el-form-item>
    </el-form>
    
      <!-- 显示区 -->
      <div  ref="box"  contenteditable="true" style="width:100%;height: 530px;background-color: ghostwhite; overflow: auto;" v-html="textLogsValue">
      </div>
   
    </div>
</template>

<script>


export default {
  name: "Rtlogs",
  data() {
    return {
      websock: null,
      textLogsValue: ""
    };
  },
  created() {
     this.initWebSocket();
  },
  methods: {
    
    /** 清屏 */
    clear() {
     this.textLogsValue="";
    },
 
    foot()
    {
        var div = this.$refs.box;
        this.$nextTick(() => {
        div.scrollTop =div.scrollHeight;
        console.log(div.scrollTop);
        });
    },
     
    initWebSocket(){ //初始化weosocket
 
        if ('WebSocket' in window) {
          const wsuri = "ws://localhost:10089/websocket/logging";
          this.websock = new WebSocket(wsuri);
          } else {
           this.$message('不支持WebSocket');  
        }
        this.websock.onmessage = this.websocketonmessage;
        // this.websock.onopen = this.websocketonopen;
        // this.websock.onerror = this.websocketonerror;
        // this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        //his.$message('WebSocket连接成功');  
       // this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket();
      },
      websocketonmessage(e){ //数据接收
        this.textLogsValue = this.textLogsValue + e.data;
      },
      // websocketsend(Data){//数据发送
      //   this.websock.send(Data);
      // },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      } 
  },
  destroyed() {
      this.websock.close() //离开路由之后断开websocket连接
  }
};
</script>

